<template>
  <div ref="chartRef" class="embedded-chart"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  options: {
    type: Object,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  }
});

const chartRef = ref(null);
let chartInstance = null;

onMounted(() => {
  console.log('Chart options:', props.options);
  if (chartRef.value && Reflect.ownKeys(props.options).length > 0) {
    chartInstance = echarts.init(chartRef.value);
    chartInstance.setOption(props.options);
  }
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
.embedded-chart {
  width: v-bind(width);
  height: v-bind(height);
  margin: 10px 0;
}
</style>
